<template>
	<view class="shop-container">
		
		<view class="index-header">
			<!--搜索-->
			<view class="index1_content_top" :style="{background:'#fcc80e'}">
				<view style="width: 40rpx;height: 40rpx;" @click="navBack()">
					<svg t="1720255270151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4416">
						<path d="M714.83 962c-12.535 0-25.07-4.749-34.689-14.247L274.478 547.142c-9.389-9.281-14.681-21.913-14.681-35.124s5.292-25.843 14.681-35.124L680.141 76.258c19.395-19.166 50.662-18.997 69.814 0.434 19.164 19.406 18.973 50.649-0.434 69.814L379.429 512.018l370.092 365.487c19.406 19.165 19.598 50.408 0.434 69.814C740.301 957.106 727.572 962 714.83 962z" fill="#ffffff" p-id="4417"></path>
					</svg>
				</view>
				<view @click="navBack()" style="width: 15%;color: #fff;font-size: 30rpx;font-weight: bold;text-align: center;">
					<view>再团</view>
				</view>
				
				<view class="index1_content_top_r">
					<view class="iconfont iconsousuo"></view>
					<input type="text" placeholder="输入商品名" class="index1_content_top_r_input"
						@click="search"></input>
				</view>
			</view>
			
			<view style="display: flex;justify-content: space-around;line-height: 50px;font-size: 10pt;text-align: center;background-color: #FFFFFF;z-index: 999;position: relative;">
				<view style="position: relative;padding-right: 20rpx;display: flex;align-items: center;"
					v-for="(item,index) in orderKey"
					:class="active===index?'actove':''" @click="sortselect(index)">
					<text style="font-size: 12pt;">{{item.name}}</text>
					<view style="width: 0;height: 0;border:15rpx solid #000000;border-left-color: transparent;border-right-color: transparent;border-bottom-color: transparent;margin-top: 16rpx;margin-left: 18rpx;"></view>
				</view>
			</view>
		</view>

		<view class="shop-type">
			<cg-swiper :swiperList="catorylist" :swiperDots='true' :autoplay='false' @clickItem="clickItem"></cg-swiper>
		</view>
		

		<view class="shop_table_list">
			<view class="shop_table_item" v-for="(item,index) in goodsList" :key='index' @click="openUrl('/pages/goods/detail?proId=' + item.goods_id )">
				<view class="shop_table_item_left">
					<!-- <image :src="item.goods_warehouse.cover_pic" mode="aspectFill"></image> -->
					<u-lazy-load :image="item.goods_warehouse.cover_pic"></u-lazy-load>
				</view>
				<view class="shop_table_item_right">
					<view class="shop_table_item-name">
						{{item.goods_warehouse.name}}
					</view>
					<view style="font-size: 8pt;margin-top: 10rpx;">
						<text class='tags' v-for="(itm,index) in item.cats" :key="index">{{itm}}</text>
					</view>
					<view class="shop_table_item-location">
						<!-- <image :src="img_url+'dao_location.png'" mode="" style="width: 35rpx;height: 35rpx;"></image> -->
						<view style="width: 40rpx;height:40rpx;">
							<svg t="1720171465192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4325">
								<path d="M512 174.08c-132.645926 0-240.165926 107.52-240.165926 240.165926 0 139.472593 173.795556 358.58963 225.754074 420.882963 7.49037 9.007407 21.428148 9.007407 28.918519 0C578.37037 772.93037 752.165926 553.718519 752.165926 414.245926 752.165926 281.6 644.645926 174.08 512 174.08zM522.334815 778.903704c-5.30963 6.542222-15.36 6.542222-20.66963 0C443.448889 706.939259 308.717037 528.118519 308.717037 415.099259c0-112.071111 91.211852-203.282963 203.282963-203.282963s203.282963 91.211852 203.282963 203.282963C715.282963 528.118519 580.551111 706.939259 522.334815 778.903704z" fill="#272536" p-id="4326"></path><path d="M512.948148 298.192593c-63.051852-0.568889-114.346667 50.725926-113.777778 113.777778 0.474074 61.25037 50.631111 111.312593 111.881481 111.881481 63.051852 0.568889 114.346667-50.725926 113.777778-113.777778C624.260741 348.823704 574.198519 298.761481 512.948148 298.192593zM512 485.925926c-41.339259 0-74.903704-33.564444-74.903704-74.903704s33.564444-74.903704 74.903704-74.903704 74.903704 33.564444 74.903704 74.903704S553.339259 485.925926 512 485.925926z" fill="#272536" p-id="4327"></path>
							</svg>
						</view>
						<text class="address">{{item.store.address}}</text>
						<text>|&nbsp;&nbsp;{{item.distance}}</text>
					</view>
					<view class="price">
						<view class="left">
							<view v-if="item.local_life_type == 1">
								<text style="font-size: 12pt;font-weight: 600;"><span style="font-size: 8pt;">￥</span>{{item.goods.price}}</text>
								<text style="text-decoration: line-through;">￥{{item.goods_warehouse.original_price}}</text>
							</view>
							<view v-if="item.local_life_type == 2">
								<text style="font-size: 12pt;font-weight: 600;"><span style="font-size: 8pt;">￥</span><span style="text-decoration: line-through;">{{item.goods_warehouse.original_price}}</span></text>
								<!-- <text style="text-decoration: line-through;">￥{{item.goods_warehouse.original_price}}</text> -->
							</view>
							<view style="text-align: right;font-size: 10pt;font-weight: 600;">
								<text v-if="item.config">送{{item.reward_price}}购物券</text>
								<text v-else>{{item.shopping_price}}购物券兑换</text>
							</view>
						</view>
						<view class="button">
							抢
						</view>	
					</view>
				</view>
			</view>
	
			<!--加载loadding-->
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="!pullUpOn" bgcolor="#FFFFFF"></main-nomore>
			<!--加载loadding-->
		</view>
		
	
		<unipopup v-for="(item,index) in orderKey" :ref="'orderPopup'+item.key" type="top">
			<view  class="goods_sort" style="margin-top: 110rpx;">
				<view v-for="(itm,idx) in orderType" :key='idx'
				@click="orderChange(index,itm)" 
				:class="item.value===itm.value?'sortClass':''" 
				style="text-align: center;height: 100rpx;line-height: 100rpx;border-bottom: 0.5px solid #f2f5f9;">{{itm.name}}</view>
			</view>
		</unipopup>

		<hans-tabber style="position:fixed;bottom:0;width:100%;left:0;right:0;"></hans-tabber>
		<backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>

<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue';
	import cgSwiper from '@/components/cg-swiper/cg-swiper.vue';
	import backTop from '@/components/back-top/back-top.vue';
	import unipopup from '@/components/uni-popup/uni-popup';
	
	export default {
		components: {
			hansTabber,
			cgSwiper,
			backTop,
			unipopup
		},
		data(){
			return {
				backTop: {
					src: '/static/back-top/top.png',
					scrollTop: 0
				},
				loadding: false,
				pullUpOn: true,
				
				form: {
					type:'',
					keyword: '',
					page: 1,
				},
				page_count: 0, //总页数
				goodsList:[],
				catorylist:[],
				orderKey:[
					{
						key:'price',
						name:'价格',
						value:''
					},
					{
						key:'sales',
						name:'销量',
						value:''
					}
				],
				orderType:[
					{name:'全部',value:''},
					{name:'由低到高',value:'asc'},
					{name:'由高到低',value:'desc'},
				],
				active:''
			}
		},
		onLoad(opt){
			this.form.type = opt.type ?? 1;
			this.getcatory();
			this.getGoodsList();
		},
		methods:{
			sortselect(index){ //排序
				let refs = 'orderPopup' + this.orderKey[index].key;
				let PopupObject = this.$refs[refs][0];
				
				if(this.active !== '' && this.active === index){
					//再次点击已展开的 popup，则进行关闭
					if(PopupObject.showPopup){
						this.active = '';
						PopupObject.close();
					}else{
						PopupObject.open();
					}
				}else{
					this.active = index;
					this.orderKey.forEach( (item,index) =>{
						//先全部关闭
						this.$refs['orderPopup'+ item.key][0].close();
					})
					//展开对应的 popup
					PopupObject.open();
				}
			},
			openUrl(url){
				uni.navigateTo({url});
			},
			clickItem(e) {
				this.form.cat_id = e.id
				this.form.page = 1
				this.page_count = ''
				this.goodsList = []
				this.getGoodsList()
			},
			getGoodsList(){
				let that = this;
				this.loadding = true;
				this.pullUpOn = true;
				that.$http.request({
					url:that.$api.localLife.goodsList,
					method:'post',
					data:that.form
				}).then(res => {
					this.loadding = false;
					this.pullUpOn = false;
					if (res.code != 0) {
						that.$http.toast(res.msg);
						return ;
					}
					that.goodsList = that.goodsList.concat(res.data.list)
					that.page_count = res.data.pagination.page_count;
				})
			},
			getcatory() { //获取分类
				this.$http.request({
					url: this.$api.moreShop.getcategorylist,
					method: 'POST',
					data: '',
					showLoading: true
				}).then(res => {
					if (res.code == 0) {
						this.catorylist = res.data.list
					} else {
						this.$http.toast(res.msg);
					}
				});
			},
			orderChange(idx,itm){
				this.orderKey[idx].value = itm.value;
				this.form.page = 1
				this.form.orderKey = this.orderKey
				this.page_count = ''
				this.goodsList = []
				this.getGoodsList()
				let refs = 'orderPopup' + this.orderKey[idx].key;
				let PopupObject = this.$refs[refs][0];
				PopupObject.close()
			},
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.loadding = true;
			this.pullUpOn = true;
			if (this.form.page == this.page_count) {
				this.loadding = false;
				this.pullUpOn = false;
				return false;
			}
			this.form.page = this.form.page + 1
			this.getGoodsList()
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../plugins/font-icon/iconfont1.css");

	.shop-container {
		width: 100%;
		overflow: hidden;
	}

	.index1_content_top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 15px 15px 10px 15px;
	}
	
	.index-header{
		width: 100vw;
		position: fixed;
		top:0;
		left: 0;
		z-index: 999;
	}
	.header-menu{
		display: flex;
		background-color: #fff;
		justify-content: space-around;
		box-shadow: 0 2rpx 4rpx rgba(0,0,0,.4);
		font-size: 12pt;
		color: #da0202;
	}
	.header-menu .menu-item{
		padding: 30rpx 0;
	}
	
	

	.index1_content_top_l {
		display: flex;
		font-size: 13px;
		font-weight: bold;
		color: #131313;
	}

	.index1_content_top_l_r {
		margin-left: 5px;
		width: 8px;
		height: 8px;
		border-top: 2px #FFF solid;
		border-right: 2px #fff solid;
		transform: rotate(135deg);
		margin-top: 3px;
		margin-bottom: 8px;
	}

	.index1_content_top_r {
		width: 60%;
		height: 29px;
		background: #F4F4F4;
		border-radius: 14px;
		font-size: 14px;
		margin-left: 15px;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}

	.index1_content_top_r_input {
		width: 100%;
		font-size: 14px;
	}

	.shop-type {
		width: 100%;
		overflow: hidden;
		/* #ifdef H5*/
			margin-top: 110rpx;
		/* #endif */
		/* #ifdef APP-PLUS||MP */
			margin-top: 108rpx;
		/* #endif */
	}

	.shop-table {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		background: rgb(244, 244, 244);
	}

	.shop-table view {
		width: 30%;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.shop-table view text {
		display: block;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}

	.shop-table view text:nth-of-type(2) {
		width: 80rpx;
		height: 5rpx;
	}

	.active {
		color: #FF7104;
	}

	.active text:nth-of-type(2) {
		background: #FF7104;
	}

	.shop_table_list {
		width: 100%;
		overflow: hidden;
		background-color: #f1f1f1;
	}

	.shop_table_item {
		width: 95%;
		margin: 15rpx auto;
		background: #fff;
		display: flex;
		justify-content: space-evenly;
		overflow: hidden;
		border-radius: 20rpx;
		align-items: center;
	}

	.shop_table_item_left {
		width: 30vw;
		height: 30vw;
		margin: 25rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.shop_table_item_left image {
		width: 100%;
		display: block;
		height: 100%;
	}

	.shop_table_item_right {
		width: 64%;
		padding-left: 10rpx;
		box-sizing: border-box;
		margin: 15rpx 0 20rpx 0;
		position: relative;
	}

	.shop_table_item-name {
		width: 100%;
		font-size: 30rpx;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.shop_table_item_notice {
		font-size: 27rpx;
		color: rgb(255, 166, 0);
		margin-top: 15rpx;
		background: rgb(247, 236, 230);
		width: 80%;
		text-align: center;
		border-radius: 1rpx;
	}

	.shop_table_item-score {
		width: 100%;
		overflow: hidden;
		flex: 1;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.shop_table_item-location {
		width: 100%;
		overflow: hidden;
		font-size: 9pt;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.shop_table_item-location image {
		display: inline-block;
		position: relative;
		top: 6rpx;
	}

	.shop_table_item-location .address{
		width: 70%;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	
	.shop_table_item .price{
		font-size: 8pt;
		background-image: url('@/static/icon/goods_price_b.png');
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		border-radius: 100rpx;
		padding-left:30rpx;
	}
	
	.shop_table_item .price .button{
		font-size: 14pt;
		color:#fff;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		padding-left: 40rpx;
		border-bottom-right-radius: 50px;
		border-top-right-radius: 50px;
		position: relative;
	}
	.shop_table_item .price .left{
		width: 70%;
		color:#da0202;
		margin-right: 20rpx;
	}

	// .shop_table_item .price .button::after{
	// 	content: '';
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	border-style: solid;
	// 	border-color: rgb(250, 240, 240);
	// 	border-left-width: 10rpx;
	// 	border-top-width: 26rpx;
	// 	border-bottom-width: 26rpx;
	// 	border-right-width: 10rpx;
	// 	border-bottom-color: transparent;
	// 	border-right-color: transparent;
	// }
	// .shop_table_item .price .button::before{
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 0;
	// 	left: 0;
	// 	border-style: solid;
	// 	border-color: rgb(250, 240, 240);
	// 	border-left-width: 10rpx;
	// 	border-top-width: 22rpx;
	// 	border-bottom-width: 22rpx;
	// 	border-right-width: 10rpx;
	// 	border-bottom-color: transparent;
	// 	border-right-color: transparent;
	// }
	.tags{
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
		color:#da0202;
		margin:5rpx;
		border: 1px solid #da0202;
	}
	
	
	.switchStyle{
		margin-right: 20rpx;
	}
	
	.sort{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		line-height: 100rpx;
	}
	.actove{color: rgb(255, 113, 4)}
	
	.goods_sort{
		width: 100%;
		z-index: 999;
		background: #fff;
		/* #ifdef H5 */
		height: 300rpx;
		margin-top: 100rpx;
		/* #endif */
		/* #ifdef  MP||APP-PLUS  */
		height: 310rpx;
		margin-top: 120rpx;
		/* #endif */
	}
	
	.sortClass{
		color: #FF7104;
		font-weight: bold;
		background: url('https://dev.mingyuanriji.cn/web/static/yellow-right.png')no-repeat;
		background-size: 5%;
		background-position: 90% 50% ;
	}
	
</style>
